<template>
    <!-- 搜索框 -->
    <div class="select">
        <span>人员:</span>
        <el-input v-model="userName" placeholder="请输入要查询的名字" clearable style="width: 260px;" />
        <el-button type="primary" @click="onSelected">搜索</el-button>
        <el-button @click="resetTing">重置</el-button>
    </div>
    <!-- 排班日历 -->
    <el-calendar v-model="date" class="custom-calendar">
        <template v-slot:date-cell="{ date, data }">
            <div>
                <el-row style="height: 75px;">
                    <el-col :span="16">
                        <div class="solar">
                            {{ data.day.split('-')[2] }}
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <el-tag v-if="holidays.indexOf(data.day) == -1" effect="dark">班</el-tag>
                        <el-tag v-else effect="dark" type="success">休</el-tag>
                    </el-col>
                </el-row>
                <el-row v-for="typeDay in typeDays">
                    <div v-for="day in typeDay.days">
                        <el-col :span="24" v-if="day == data.day && typeDay.days.indexOf(data.day) != -1" style="margin-top: -35px; margin-left: 6px;">
                            <div v-for="shiftTeam in shiftTeams" class="grid-content">
                                <el-button v-if="shiftTeam.planId == typeDay.planId" type="warning" style="width: 120px;">
                                    {{ shiftTeam.teamName }}
                                </el-button>
                            </div>
                        </el-col>
                    </div>
                </el-row>
            </div>
        </template>
    </el-calendar>
</template>

<script>
import holidayRequest from '../../../api/cal-holiday.js';
import planRequest from '../../../api/cal-plan.js';
import teamRequest from '../../../api/cal-team.js';
import teamShiftRequest from '../../../api/cal-teamShift.js';
import teamMemberRequest from '../../../api/cal-teamMember.js';
export default {
    data() {
        return {
            //人员信息
            userName: "",
            //班组信息
            teams: [],
            //班组类型
            teamType: "",
            //现在时间
            date: new Date(),
            //查询的节假日
            holidays: [],
            //计划有排班的日期
            typeDays: [],
            //计划班组的信息
            shiftTeams: [],
        }
    }, methods: {
        onSelected() {
            console.log(this.userName);
            //根据用户名查询班组编码
            teamMemberRequest.selectByUserName(this.userName, res => {
                console.log(res);
                //根据班组编码查询班组数据
                teamRequest.selectByTeamCode(res.data[0].teamCode, res => {
                    console.log(res);
                    this.teamType = res.data[0].teamTypeId;
                    console.log(this.teamType);
                    // this.name = res.data.teamName;
                    //获取分类在那个日期中有排班
                    planRequest.selectByType(this.teamType, res => {
                        this.typeDays = res.data;
                        for (let index = 0; index < this.typeDays.length; index++) {
                            this.typeDays[index].days = [];
                        }
                        //存储时间范围的全部日期
                        let arr = []
                        let v = 0;
                        this.typeDays.forEach(day => {
                            let str_b = day.startDate.split('-')
                            let str_e = day.endDate.split('-')
                            let date_b = new Date()
                            date_b.setUTCFullYear(str_b[0], str_b[1] - 1, str_b[2])
                            let date_e = new Date()
                            date_e.setUTCFullYear(str_e[0], str_e[1] - 1, str_e[2])
                            let unixDb = date_b.getTime() - 24 * 60 * 60 * 1000
                            let unixDe = date_e.getTime() - 24 * 60 * 60 * 1000

                            for (let j = unixDb; j <= unixDe;) {
                                j = j + 24 * 60 * 60 * 1000
                                this.typeDays[v].days.push(this.timestampToTime(new Date(parseInt(j))))
                            }
                            v++;
                            console.log(this.typeDays);
                        });
                    })
                })
            });
            // 获取计划班组信息
            teamShiftRequest.select(res => {
                this.shiftTeams = res.data;
                console.log(this.shiftTeams);
            })
        },
        /**
         * 重置按钮
         */
        resetTing() {
            this.userName = "";
            this.date = new Date();
            this.teams = [];
            this.teamType = "";
            this.typeDays = [];
            this.shiftTeams = [];
        },
        /**
         * 日期处理
         */
        timestampToTime(date) {
            var Y = date.getFullYear() + '-';
            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
            return Y + M + D;
        },
        /**
         * 查询假日
         */
        loadHoliday() {
            holidayRequest.list(res => {
                this.holidays = [];
                res.data.forEach(day => {
                    const dt = new Date(day.theDay);
                    const y = dt.getFullYear();
                    const m = (dt.getMonth() + 1 + '').padStart(2, '0');
                    const d = (dt.getDate() + '').padStart(2, '0');
                    let tiem = y + "-" + m + "-" + d;
                    this.holidays.push(tiem)
                });
            });
        },
        /**
         * 获取班组类型
         */
        loadTeams() {
            teamRequest.getList(res => {
                this.teams = res.data;
            });
        },
    }, mounted() {
        this.loadTeams();//班组类型
        this.loadHoliday();//查询假日
    }
}
</script>
<style scoped>
.select {
    margin-left: 10px;
}

.select button {
    width: 70px;
    position: relative;
    left: -2px;
}
</style>